/**
 * AnimatedLogo - Animated CAgent Logo
 * 
 * Features:
 * - Smooth fade-in animation
 * - Pulsing effect on hover
 * - Modern gradient design
 */

import { motion } from 'motion/react';
import { Bot } from 'lucide-react';

export function AnimatedLogo() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ 
        duration: 0.6,
        ease: [0.16, 1, 0.3, 1] // Custom easing for smooth bounce
      }}
      whileHover={{ scale: 1.05 }}
      className="relative w-24 h-24 mx-auto mb-8"
    >
      {/* Gradient background circle */}
      <div className="absolute inset-0 rounded-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-20 blur-xl" />
      
      {/* Main logo container */}
      <div className="relative w-full h-full rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg">
        <Bot className="w-12 h-12 text-white" strokeWidth={2} />
      </div>
      
      {/* Animated ring */}
      <motion.div
        className="absolute inset-0 rounded-full border-2 border-blue-400 opacity-50"
        animate={{
          scale: [1, 1.1, 1],
          opacity: [0.5, 0.2, 0.5],
        }}
        transition={{
          duration: 2,
          repeat: Infinity,
          ease: "easeInOut"
        }}
      />
    </motion.div>
  );
}

